<template>
  <div class="person">
    <h2>汽车信息:一辆{{car.brand}},价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeCar">修改车</button>
    <br>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSUm">点我sum+1</button>
    <!-- <h2>游戏列表:</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button> -->
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive} from 'vue'

  //数据
  let car =ref({brand:'奔驰',price:100})
  let sum =ref(0)
  // let games = ref([
  //   {id:'aysdytfsatr01',name:'王者荣耀'},
  //   {id:'aysdytfsatr02',name:'原神'},
  //   {id:'aysdytfsatr03',name:'第五人格'}
  //   ])
  //   let obj = reactive({x:999})
  //   console.log(car)
  //   console.log(obj)

    //方法
    function changePrice(){
      car.value .price+=10
      console.log(car.value.price)
    }
    function changeBrand(){
      car.value.brand='玛莎拉蒂'
    }
    function changeCar(){
      // car= {brand:'布加迪',price:100}
      car.value= { brand: '布加迪', price: 1000 }
    }
    function changeSUm(){
      sum.value +=1
    }
    // function changeFirstGame(){
    //   games.[0].name='穿越火线'
    // }
</script>